<template>
    <div class="tab">
      <van-nav-bar class="indexnav"
      :title="title"
     
      />
      <div class="content">
          <router-view></router-view>
      </div>
      <div style="height: 50px;"></div>
      <van-tabbar active-color="yellowgreen"  route>
      <van-tabbar-item v-for="v,k in tab" replace :to="v.path" :icon="v.icon">
          {{ v.text }}
      </van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  <script>
  export default {
      components: {},
      props: {},
      data() {
          return {
              title:'首页',
              tab:[
                  {text:'首页',icon:'home-o',path:'/index/home'},
                  {text:'分类',icon:'apps-o',path:'/index/cate'},
                  {text:'购物车',icon:'cart-o',path:'/index/car'},
                  {text:'个人中心',icon:'user-o',path:'/index/my'},
              ]
          };
      },
      computed: {},
      created() {},
      mounted() {},
      methods: {},
      watch: {
          $route:{
              handler(n){
                 console.log(n);
              //  在tab内找到与当前path对应的数据 数据的text属性就是标题
                 this.title=this.tab.find(v=>v.path==n.path).text
                 
              },
              deep:true,
              immediate:true
          }
      },
  };
  </script>
  <style scoped >
  .indexnav{
      background: rgb(150, 191, 183)
  }
  </style>
  